<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../css/customer.css">
	<link rel="stylesheet" href="../css/style.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <title>登录页面</title>
	<!-- <script type="text/javascript" src="./js/login.js"></script> -->
    <style>
        img {
            max-width: 200px;
            max-height: 200px;
            margin-top: 10px;
        }
    </style>
</head>

<body>
<div class="app-container" id="app">
    <h2>登录注册</h2><br/>
    <div class="box">
        <form action="customer/">
            用户名：<input type="text" id="ctm_name" v-model="ctm_name" required/><br/>
            单&nbsp;&nbsp;&nbsp;位：<input type="text" id="ctm_unit" v-model="ctm_unit" required/><br/>
            职&nbsp;&nbsp;&nbsp;位：<input type="text" id="ctm_post" v-model="ctm_post" required/><br/>
            生&nbsp;&nbsp;&nbsp;日：<input type="text" id="ctm_birthday" v-model="ctm_birthday" required/><br/>
            性&nbsp;&nbsp;&nbsp;别：<input type="text" id="ctm_sex" v-model="ctm_sex" required/><br/>
            电&nbsp;&nbsp;&nbsp;话：<input type="text" id="ctm_tel" v-model="ctm_tel" required/><br/>
            <button type="button" class="btn" @click="handleCreate()">注册</button>
            <button type="submit" class="btn" @click="customerSubmit()">登录</button>
        </form>
        <!-- 新增标签弹层 -->
        <div class="add-form">
            <el-dialog title="注册用户" :visible.sync="dialogFormVisible">
                <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="用户名" prop="ctm_name">
                                <el-input id="name" v-model="formData.ctm_name"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="单位" prop="ctm_unit">
                                <el-input id="unit" v-model="formData.ctm_unit"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="职位" prop="ctm_post">
                                <el-input id="post" v-model="formData.ctm_post"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="生日" prop="ctm_birthday">
                                <el-input id="birthday" v-model="formData.ctm_birthday"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="性别" prop="ctm_sex">
                                <el-input id="sex" v-model="formData.ctm_sex"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="联系方式" prop="ctm_tel">
                                <el-input id="tel" v-model="formData.ctm_tel"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="简历" prop="docx">
                                <el-input id="docx" v-model="formData.docx"/>
                            </el-form-item>
                        </el-col>
                        <div>
                            <input type="file" @change="handleFileChange" accept="image/*">
                            <img v-if="imageUrl" :src="imageUrl" alt="Preview">
                        </div>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <button type="button" class="btn" @click="dialogFormVisible = false">取消</button>
                    <button type="submit" class="btn" @click="handleAdd()">确定</button>
                </div>
            </el-dialog>
        </div>

    </div>
</div>
<%--<div id="profile">{{ profileImg }}</div>--%>
<%--<div><img src="../img/13.jpg"></div>--%>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>

<script>
    let customerInfo = {
        ctm_name: '',
        ctm_unit: '',
        ctm_post: '',
        ctm_birthday:'',
        ctm_sex:'',
        ctm_tel:'',
        profile: '',
        docx: ''
    };

    var address = {profileImg: ''};

    let vue = new Vue({
        el: '#app',
        data:{
            pagination: {},
            formData: {},//表单数据
            dialogFormVisible: false,//控制表单是否可见
            rules: {//校验规则
                ctm_name: [{ required: true, message: '姓名为必填项', trigger: 'blur' }],
                /*ctm_unit: [{ required: true, message: '单位为必填项', trigger: 'blur' }],
                ctm_post: [{ required: true, message: '职位为必填项', trigger: 'blur' }],*/
                ctm_tel: [{ required: true, message: '联系方式为必填项', trigger: 'blur' }],
                // docx: [{ required: true, message: '简历为必填项', trigger: 'blur' }]
            },
            imageUrl: null,
            objectImg: null,
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            // this.$message.success("欢迎!!!")
        },

        methods: {
            //搜索查询表单
            getData(){

            },
            //弹出添加窗口
            handleCreate() {
                this.dialogFormVisible = true;
                this.resetForm();
            },
            //重置表单
            resetForm() {
                this.formData = {};
            },
            //重置图片路径
            resetImg(){
              this.imageUrl = null;
            },
            handleFileChange(e) {
                const file = e.target.files[0];
                this.objectImg = JSON.stringify(URL.createObjectURL(file));
                if (file) {
                    const reader = new FileReader();
                    reader.onloadend = () => {
                        this.imageUrl = reader.result;
                    };
                    reader.readAsDataURL(file);
                }
            },
            //注册用户
            handleAdd () {
                customerInfo.ctm_name = document.getElementById("name").value;
                customerInfo.ctm_unit = document.getElementById("unit").value;
                customerInfo.ctm_post = document.getElementById("post").value;
                customerInfo.ctm_birthday = document.getElementById("birthday").value;
                customerInfo.ctm_sex = document.getElementById("sex").value;
                customerInfo.ctm_tel = document.getElementById("tel").value;
                customerInfo.profile = this.objectImg;
                customerInfo.docx = document.getElementById("docx").value;

                axios.post("/customer/", customerInfo).then((res)=>{
                    this.dialogFormVisible = false;
                    if(res.data.code === 30011){
                        this.dialogFormVisible = false;
                        this.$message.success("注册成功!")
                        this.resetForm();
                        this.resetImg();
                    }else if(res.data.code === 30010){
                        this.dialogFormVisible = true;
                        this.$message.error("注册失败!");
                        this.resetForm();
                        this.resetImg();
                    }
                }).catch(()=>{
                    this.$message.error("error...");
                })
            },
            //登录
            customerSubmit() {

                let ctm_name = document.getElementById("ctm_name").value;
                // let ctm_unit = document.getElementById("ctm_unit").value;
                // let ctm_post = document.getElementById("ctm_post").value;
                // let ctm_birthday = document.getElementById("ctm_birthday").value;
                // let ctm_sex = document.getElementById("ctm_sex").value;
                let ctm_tel = document.getElementById("ctm_tel").value;
                axios.get("/customer/" + ctm_name + "/" + ctm_tel).then((res)=>{
                    address.profileImg = res.data.profile;
                    if(res.data.code === 30021){
                        this.$message.success("登录成功！");
                        window.location.replace("http://localhost:8080/pages/books.jsp");
                        this.resetForm();
                    }else if(res.data.code === 30020){
                        this.$message.error("登录失败！");
                        window.location.reload();   //刷新当前页面
                        this.resetForm();
                    }
                });

            }

        }
    })
</script>

</body>
</html>
